<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta charset="UTF-8" />
	<title>Using omi-html</title>
</head>

<body>
	<script src="https://unpkg.com/omi"></script>
	<script src="https://unpkg.com/omi-html"></script>
	<script>
		const { define, WeElement, render } = Omi

		define('my-counter', class extends WeElement {

			install() {
				this.constructor.observe = true
				this.data.count = 1
				this.sub = this.sub.bind(this)
				this.add = this.add.bind(this)
			}

			sub() {
				this.data.count--
			}

			add() {
				this.data.count++
			}

			render() {
				return html`
					<div>
						<button onClick=${this.sub}>-</button>
						<span>${this.data.count}</span>
						<button onClick=${this.add}>+</button>
					</div>
					`}
		})

		render(html`<my-counter />`, 'body')
	</script>

	<a href="https://github.com/Tencent/omi/tree/master/packages/omi-html" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
		<img src="//alloyteam.github.io/github.png" alt="">
	</a>
</body>

</html>
